<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../dev/vendors/vue.js"></script>
  <script src="../dev/vendors/jroll.js"></script>
  <script src="node_modules/jtaro-module/src/client.js"></script>
</head>
<body>
  <div id="jtaro_app"></div>
  <script src="../dev/vendors/jtaro.js"></script>

<script>
  JTaro.beforeEnter.add('hook', function () { 
    console.log("全局路由钩子 beforeEnter")
  })
  Vue.component('home', {
      template: '<div id="home">Hello JTaro!<br><div v-on:click="gotoPage">跳到page</div></div>',
      methods: {
        gotoPage: function() {
          this.go('page/1?a=3', {
            a: 1
          })
        }
      },
      onMessage: function (event) {
        console.log(event) // {message: 'modifyTitle', origin(源，从这里发送来的消息): 'about'}
      },
      // beforeEnter: function (cb) {
        // console.log(this) // JTaro
        // cb(function (vm) {
        //   console.log(this) // <home>组件实例`this`
        //   console.log(vm)   // <home>组件实例`this`
        // })
      // },
      afterEnter: function (param) {
        console.log(param)
      }
      // ,
      // beforeLeave: function (cb) {
      //   console.log(this)
      //   setTimeout(function () {
      //     // ...
      //     cb()
      //   }, 1000)
      // }
    })
    Vue.component('page__1', {
      template: '<div id="home">这是Page<br><div v-on:click="goHome">跳到home</div></div>',
      methods: {
        goHome: function() {
          this.go('home', {
            h: 'home'
          })
        }
      },
      afterEnter: function (param) {
        console.log(param);
        this.postMessage('modifyTitle', 'home');
      }
    })
    Vue.use(JTaro)
</script>
</body>
</html>